<html>

<head>
    <title>标题</title>
</head>

<body>
    <style>
        span.btn {
            BORDER-RIGHT: #7b9ebd 1px solid;
            PADDING-RIGHT: 2px;
            BORDER-TOP: #7b9ebd 1px solid;
            PADDING-LEFT: 2px;
            FONT-SIZE: 12px;
            FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde);
            BORDER-LEFT: #7b9ebd 1px solid;
            COLOR: black;
            PADDING-TOP: 2px;
            BORDER-BOTTOM: #7b9ebd 1px solid;
            background-color: #CCCCCC;
        }
    </style>
    <script language="javascript">
        var doing;
        var candown = 0;
        var wnum = 13;
        var hnum = 18;
        var grid = new Array();
        var gridBuf = new Array();
        for (i = 0; i <= hnum; i++) {
            grid[i] = new Array();
            gridBuf[i] = new Array();
            for (j = 0; j <= wnum; j++) {
                if (j > 0 && j < wnum && i < hnum) {
                    grid[i][j] = 0;
                    gridBuf[i][j] = 0;
                } else {
                    grid[i][j] = 1;
                    gridBuf[i][j] = 1;
                }
            }
        }
        var boxdata =
            [
                [
                    [1, 1, 1, 1],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ],
                [
                    [1, 1, 1, 0],
                    [1, 0, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0],
                ],
                [
                    [1, 1, 1, 0],
                    [0, 1, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ],
                [
                    [1, 1, 1, 0],
                    [0, 0, 1, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ],
                [
                    [1, 1, 0, 0],
                    [0, 1, 1, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ],
                [
                    [0, 1, 1, 0],
                    [1, 1, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ],
                [
                    [1, 1, 0, 0],
                    [1, 1, 0, 0],
                    [0, 0, 0, 0],
                    [0, 0, 0, 0]
                ]
            ];
        var colors = ["black", "#A0A0A0", "red", "#FF8000", "yellow", "pink"];
        var gotLine = 0;
        var box;
        var bGameOver = false;
        function getHeight(arr) {
            var i, j;
            for (i = 3; i >= 0; i--)
                for (j = 0; j < 4; j++)
                    if (arr[i][j]) return i;
        }
        function getWidth(arr) {
            var i, j;
            for (i = 3; i >= 0; i--)
                for (j = 0; j < 4; j++)
                    if (arr[j][i]) return i;
        }
        function Box(x, y, arr, color) {
            this.arr = arr;
            this.x = x;
            this.y = y;
            this.w = getWidth(arr);
            this.h = getHeight(arr);
            this.color = color;
            this.active = true;
            this.clearOldBox = function () {
                for (var j = 0; j <= this.h; j++)
                    for (var i = 0; i <= this.w; i++)
                        if (this.arr[j][i] > 0) grid[this.y + j][this.x + i] = 0;
            }
            this.putNewBox = function () {
                for (var j = 0; j <= this.h; j++)
                    for (var i = 0; i <= this.w; i++)
                        if (this.arr[j][i] > 0) grid[this.y + j][this.x + i] = this.color;
            }
            this.moveLeft = function () {
                this.clearOldBox();
                var _x = this.x - 1;
                if (this.canMove(_x, this.y)) this.x = _x;
                this.putNewBox();
                drawGrid();
            }
            this.moveRight = function () {
                this.clearOldBox();
                var _x = this.x + 1;
                if (this.canMove(_x, this.y)) this.x = _x;
                this.putNewBox();
                drawGrid();
            }
            this.moveDown = function () {
                this.clearOldBox();
                var _y = this.y + 1;
                if (this.canMove(this.x, _y)) {
                    this.y = _y;
                    this.putNewBox();
                    drawGrid();
                } else {
                    this.putNewBox();
                    drawGrid();
                    checkLineFull();
                    return;
                }
            }
            this.rotate = function () {
                var tmp = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
                for (j = 0; j <= this.h; j++)
                    for (i = 0; i <= this.w; i++)
                        tmp[this.w - i][j] = this.arr[j][i];
                var newBox = new Box(this.x, this.y, tmp, this.color);
                this.clearOldBox();
                if (!newBox.canMove(this.x, this.y)) this.putNewBox();
                else {
                    box = newBox;
                    box.putNewBox();
                    drawGrid();
                }
            }
            this.canMove = function (x, y) {
                for (var j = 0; j <= this.h; j++)
                    for (var i = 0; i <= this.w; i++) {
                        if (grid[y + j][x + i] != 0 && this.arr[j][i] != 0) { candown = 1; return false; }
                    }
                return true;
            }
        }
        function drawGrid() {
            for (var j = 0; j < hnum; j++)
                for (var i = 0; i < wnum; i++) {
                    if (grid[j][i] != gridBuf[j][i]) {
                        paintCell(j, i, grid[j][i]);
                    }
                    gridBuf[j][i] = grid[j][i];
                }
        }
        function paintCell(i, j, color) {
            var htmlGrid = document.getElementById("TetrisGrid").firstChild;
            htmlGrid.childNodes[i].childNodes[j].style.backgroundColor = colors[color];
        }
        function init() {
            var html = '<table id="TetrisGrid" cellspacing=1 style="background-color:green"><tbody>';
            for (var i = 0; i <= hnum; i++) {
                html += '<tr>';
                for (var j = 0; j <= wnum; j++) {
                    html += '<td width="20" height="20" style="background-color:' + colors[grid[i][j]] + ';"></td>';
                }
                html += '</tr> \r\n';
            }
            html += '</tbody></table>';
            document.write(html);
        }
        function checkLineFull() {
            var full, i, j, i2;
            var y3 = box.y + box.h;
            var y4 = box.y;
            for (i = y3; i >= y4;) {
                full = 1;
                for (j = 0; j < wnum; j++)
                    if (grid[i][j] == 0) { full = 0; break; }
                if (full == 0) { --i; continue; }
                for (i2 = i; i2 > 0; i2--)
                    for (j = 0; j < wnum; j++)
                        grid[i2][j] = grid[i2 - 1][j];
                drawGrid();
                y4++;
                gotLine++;
            }
            checkGameOver();
        }
        function checkGameOver() {
            var bOver = false;
            for (var j = 1; j < wnum; j++)
                if (grid[0][j] > 0) { bOver = true; break; }
            if (!bOver) {
                box = new Box((wnum - 1) / 2, 0, boxdata[Math.floor(Math.random() * 7)], Math.floor(Math.random() * 5) + 1);
                box.putNewBox();
            }
            else {
                bGameOver = true;
                msg.innerHTML = "游戏结束! 您的得分为" + gotLine * 100;
                window.clearTimeout(doing);
            }
        }
        function document_onkeydown() {
            if (bGameOver) return;
            switch (event.keyCode) {
                case 32:
                    down();
                    break;
                case 37:
                    box.moveLeft();
                    break;
                case 39:
                    box.moveRight();
                    break;
                case 38:
                    box.rotate();
                    break;
                case 40:
                    box.moveDown();
                    break;
                case 80:
                    stop();
                    break;
                case 66:
                    window.location.reload();
                    break;
                case 67:
                    restart();
                    break;
            }
        }
        function down() {
            if (window.event.keyCode == 32) {
                clearTimeout(doing);
                for (i = 0; i < hnum; i++) {
                    if (candown == 0) {
                        box.moveDown();
                    } else {
                        break;
                    }
                }
                candown = 0;
                doing = window.setTimeout('moveDownBox()', interval);
            }
        }
        var interval;
        function moveDownBox() {
            interval = 1000 - 10 * (gotLine > 80 ? 80 : gotLine);
            msg.innerHTML = " 等级：" + Math.floor(gotLine / 10) + "；得分:" + gotLine * 100;
            box.moveDown();
            doing = window.setTimeout('moveDownBox()', interval);
        }
        function startGame() {
            init();
            doing = window.setTimeout('moveDownBox()', 1000);
            bGameOver = false;
            box = new Box((wnum - 1) / 2, 0, boxdata[Math.floor(Math.random() * 7)], Math.floor(Math.random() * 5) + 1);
            box.putNewBox();
            drawGrid();
        }
        var status;
        function stop() {
            status = 1;
            window.clearTimeout(doing);
        }
        function restart() {
            if (status == 1) {
                status = 0;
                doing = window.setTimeout('moveDownBox()', 1000);
            }
        }
        function keydown() {
            if (document.all) document_onkeydown()
        }
    </script>

    <BODY onLoad="window.focus()" onkeydown="keydown()">
        <table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table id="maintable" border="0" align="center" cellpadding="0" cellspacing="0">
                        <tr>
                            <td align="center">
                                <span class="btn"
                                    style="width:100%; height:24px;background-color:#F0C0C0;color:#0000FF;vertical-align:middle;text-align:center">俄罗斯方块</span>
                            </td>
                        </tr>
                        <tr>
                            <td style="height:20px;background-color:black;color:#00FF00;font-size:12px;">
                                <table height="20" border="0" cellpadding="0" cellspacing="0">
                                    <tr style="font-size:12px; color:#FFFFFF">
                                        <td width="100%"> <a style="cursor:hand"
                                                onclick="window.location.reload()">开始（B）</a> <a style="cursor:hand"
                                                onclick="stop();">暂停（P）</a> <a style="cursor:hand"
                                                onclick="restart();">继续（C）</a></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td style="height:20px;background-color:black;color:#00FF00;font-size:12px;" id="msg">
                                等级：0；得分:0</td>
                        </tr>
                        <tr>
                            <td height="20">
                                <script language=javascript>
                                    maintable.style.width = (wnum + 1) * 20;
                                    startGame();
                                </script>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </body>

</html>